<template>
  <div class="login">
    <div class="bodyer">
      <div class="login-header">
        <div class="header-img">
          <img src="../../assets/images/logo.png" alt />
        </div>
        <span>布鲁克商城</span>
      </div>
      <el-form
        ref="loginForm"
        :model="loginForm"
        class="login-form"
        auto-complete="on"
        label-position="left"
        size="medium"
      >
        <el-form-item prop="username">
          <el-input
            placeholder="账户"
            v-model.trim="loginForm.username"
            clearable
            name="username"
            ref="autofocus"
            class="user-name"
            id="login-username"
          >
            <i slot="prefix" class="el-input__icon el-icon-user"></i>
          </el-input>
          <p></p>
        </el-form-item>

        <el-form-item prop="password">
          <el-input
            placeholder="密码"
            id="login-password"
            v-model.trim="loginForm.password"
            show-password
            class="pass-word"
            name="password"
            @keyup="keySubmit"
          >
            <i slot="prefix" class="el-input__icon el-icon-lock"></i>
          </el-input>
          <p></p>
        </el-form-item>

        <!-- <el-form-item prop="password">
                <el-radio v-model="loginType" label="1">用户</el-radio>
                <el-radio v-model="loginType" label="2">商家</el-radio>
        </el-form-item>-->

        <el-button
          class="btn-login"
          id="btn_login"
          :loading="loading"
          type="primary"
          size="gib"
          @click="login"
        >登 录</el-button>
      </el-form>
    </div>
    <p class="footer">Copyright © 2020 布鲁克商城</p>
  </div>
</template>

<script>
import AES from "@/utils/AES.js";
import tim from "@/tim.js";
import LibGenerateTestUserSig from "@/utils/lib-generate-test-usersig.min";
export default {
  data() {
    return {
      loginForm: {
        username: "",
        password: "",
      },
      // loginType: '',
      loading: false,
    };
  },
  created() {
    this.keySubmit();
    localStorage.removeItem("intrachaincode");
  },
  mounted() {
    this.focus();
  },
  methods: {
    async login() {
      let obj = {
        password: AES.encrypt(this.loginForm.password),
        username: this.loginForm.username,
        loginType: 2,
      };
      if (this.loginForm.username) {
        if (this.loginForm.password) {
          this.loading = true;
          const res = await this.axios.login(obj);
          if (res.data.code == 200) {
            this.loading = false;
            localStorage.setItem("intrachaincode", res.data.data.token);
            if (res.data.data.storeList) {
              this.$store.commit("print/setPrint", {
                storeName: res.data.data.storeList.storeName,
                id: res.data.data.storeList.id,
                uid: res.data.data.userInfo.uid,
                storeNo: res.data.data.storeList.storeNo,
                owner: res.data.data.storeList.owner,
                phone: res.data.data.userInfo.phone,
                cate1Id: res.data.data.storeList.cate1Id,
                isSelf: res.data.data.storeList.isSelf,
                applyId: res.data.data.storeList.applyId,
                userName: res.data.data.userInfo.userName,
                storeId: res.data.data.storeList.id,
                userSig: res.data.data.userSig,
              });
            } else {
              this.$store.commit("print/setPrint", {
                uid: res.data.data.userInfo.uid,
                phone: res.data.data.userInfo.phone,
                userName: res.data.data.userInfo.userName,
                userSig: res.data.data.userSig,
              });
            }
            document.onkeypress = undefined;
            this.$message({
              type: "success",
              message: "登录成功",
              duration: 1500,
              onClose: () => {
                this.$router.push("/");
              },
            });
          } else if (res.data.code == 500) {
            this.$message({
              type: "warning",
              message: "网络繁忙，请检查网络重试",
              duration: 1500,
              onClose: () => {
                this.loading = false;
              },
            });
          } else {
            this.$message({
              type: "warning",
              message: res.data.message,
              duration: 1500,
              onClose: () => {
                this.loading = false;
              },
            });
          }
        } else {
          this.$message({
            type: "warning",
            message: "密码不能为空",
          });
        }
      } else {
        this.$message({
          type: "warning",
          message: "账号不能为空",
        });
      }
    },
    // 自动聚焦input输入框
    focus() {
      this.$refs.autofocus.focus();
    },
    keySubmit() {
      let that = this;
      document.onkeypress = function (e) {
        var keycode = document.all ? event.keyCode : e.which;
        if (keycode === 13) {
          that.login(); // 登录方法名
          return false;
        }
      };
    },
  },
};
</script>

<style lang="scss" scoped>
.login {
  height: 100vh;
  background: url("../../assets/images/login_background.png");
  overflow: hidden;
  .bodyer {
    width: 450px;
    // height: 360px;
    background: #fff;
    position: relative;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    box-sizing: border-box;
    padding: 32px 41px;
    box-shadow: 0px 13px 13px 0px rgba(0, 0, 0, 0.09285714285714292);
    border-radius: 9px;
    .login-header {
      height: 50px;
      line-height: 50px;
      text-align: center;
      padding-bottom: 35px;
      .header-img {
        width: 45px;
        height: 45px;
        display: inline-block;
        img {
          width: 100%;
          vertical-align: top;
        }
      }
      span {
        color: rgba(0, 0, 0, 0.85);
        font-size: 33px;
        color: #00baad;
        line-height: 150%;
        text-align: left;
        font-weight: bold;
        padding-left: 16px;
      }
    }
    h2 {
      margin: 15px 0;
    }
    .user-name,
    .pass-word {
      width: 368px;
    }
    .btn-login {
      font-size: 24px;
      width: 368px;
    }
  }
  .footer {
    position: absolute;
    bottom: 18px;
    left: 0;
    right: 0;
    font-size: 12px;
    color: rgba(0, 0, 0, 0.45);
    text-align: center;
  }
  .verificationCode /deep/ .el-input {
    width: 233px;
  }
  .verificationCode /deep/ .el-button--medium {
    width: 123px;
  }
}
</style>
